@charset "UTF-8";
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
/**
 * 星星
 * @param {Length} $size - 大小
 * @param {Number} $points - 边数
 * @param {Number} $inset - 内缩比例
 * @param {Color} $fill - 填充色
 */
html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  font-family: sans-serif;
}

.avatar {
  position: relative;
  margin: 100px auto 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #e18989, #de3030);
  border-radius: 50%;
  margin-bottom: 30px;
  animation-name: faceChange;
}
.avatar,
.avatar .mouth,
.avatar .eye.left,
.avatar .eye.right {
  animation-duration: 1s;
  animation-delay: var(--progress);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-play-state: paused;
}
.avatar .eye {
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: #fff;
  top: 30%;
  left: 50%;
  margin-left: -10%;
}
.avatar .eye.left {
  transform: translateX(-90%);
  animation-name: leftEyeChange;
}
.avatar .eye.right {
  transform: translateX(90%);
  animation-name: rightEyeChange;
}
.avatar .mouth {
  --w: 32px;
  --h: 32px;
  position: absolute;
  opacity: 0;
  width: var(--w);
  height: var(--h);
  top: 66px;
  left: 30%;
  border-radius: var(--w);
  animation-name: mouthChange;
  transform: translateY(calc(var(--h) / 2));
}

input[type=range] {
  width: 200px;
  margin: 0 auto;
  display: block;
}

@keyframes leftEyeChange {
  0% {
    -webkit-clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%);
  }
  50%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes rightEyeChange {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);
  }
  50%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes mouthChange {
  50% {
    height: 4px;
    box-shadow: inset 0 4px 0 #fff;
    transform: translateY(calc(var(--h) / -3));
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    opacity: 0;
  }
  50.1% {
    height: 4px;
    box-shadow: inset 0 -4px 0 #fff;
    transform: translateY(calc(var(--h) / -3));
    -webkit-clip-path: inset(50% 0 0 0);
            clip-path: inset(50% 0 0 0);
    opacity: 0.03;
  }
  100% {
    height: var(--h);
    box-shadow: inset 0 -50px 0 #fff;
    transform: translateY(calc(var(--h) / -1));
    -webkit-clip-path: inset(50% 0 0 0);
            clip-path: inset(50% 0 0 0);
    opacity: 1;
  }
}
@keyframes faceChange {
  from {
    background: linear-gradient(to bottom, #e18989, #de3030);
  }
  to {
    background: linear-gradient(to bottom, #6459df, #3b28cd);
  }
}
.eight {
  margin: 50px auto;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-image: radial-gradient(farthest-side at 125px 51%, #f00 125px, transparent 125px), radial-gradient(farthest-side at 375px 49%, #00f 125px, transparent 125px), linear-gradient(to bottom, #f00 50%, #00f 50%);
}